<template xmlns:el-col="http://www.w3.org/1999/html">
    <div>
<!--        <div class="crumbs">-->
<!--            <el-breadcrumb separator="/">-->
<!--                <el-breadcrumb-item>-->
<!--                    <i class="el-icon-lx-cascades"></i> 版本列表-->
<!--                </el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </div>-->
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.projectNm" placeholder="项目名称" class="handle-input mr10" @keyup.enter.native="handleSearch"></el-input>
                <el-input v-model="query.fileName" placeholder="文件名称" class="handle-input mr10" @keyup.enter.native="handleSearch"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
<!--                <div class="right-items" style="float: right;" >-->
<!--                    <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>-->
<!--                </div>-->
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="systemId" label="密钥" width="200" align="center"></el-table-column>
<!--                <el-table-column prop="projectId" label="项目ID" align="center" width="200"></el-table-column>-->
                <el-table-column prop="projectNm" label="项目名称" align="center" width="190"></el-table-column>
                <el-table-column prop="projectEnglishNm" label="英文名称"  align="center" width="90"></el-table-column>
                <el-table-column prop="pathName" label="存放路径"  align="center" ></el-table-column>
                <el-table-column prop="fileName" label="文件名称"  align="center" ></el-table-column>
                <el-table-column prop="typeText" label="类型"  align="center" width="80"></el-table-column>
                <el-table-column prop="version" label="版本号"  align="center" width="80"></el-table-column>
                <el-table-column prop="stateText" label="状态"  align="center" width="60"></el-table-column>
<!--                <el-table-column prop="rmk" label="说明"  align="center" width="60"></el-table-column>-->
                <el-table-column prop="istTm" label="插入时间"  align="center"></el-table-column>
                <el-table-column  label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-thumb"
                                @click="handleSee(scope.$index, scope.row)"
                        >查看</el-button>
                        <el-button v-if="scope.row.state=='01'"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleStart(scope.$index, scope.row)"
                        >启用</el-button>
                        <el-button v-if="scope.row.state=='00'"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEnd(scope.$index, scope.row)"
                        >停用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="查看" :visible.sync="seeVisible" width="40%" :before-close="seeColse">
            <el-form ref="seeForm"  :model="seeForm" label-width="100px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="密钥" prop="systemId" >
                            <el-input disabled v-model="seeForm.systemId" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="项目ID" prop="projectId">
                            <el-input disabled v-model="seeForm.projectId" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="项目名称" prop="projectNm" >
                            <el-input  disabled v-model="seeForm.projectNm" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="英文名称" prop="projectEnglishNm">
                            <el-input disabled v-model="seeForm.projectEnglishNm" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="存放路径" prop="pathName" >
                            <el-input disabled v-model="seeForm.pathName" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="文件名称" prop="fileName">
                            <el-input disabled v-model="seeForm.fileName" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="类型" prop="typeText" >
                            <el-input disabled v-model="seeForm.typeText" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="版本号" prop="version">
                            <el-input disabled v-model="seeForm.version" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="状态" prop="stateText" >
                            <el-input disabled v-model="seeForm.stateText" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="插入时间" prop="istTm">
                            <el-input disabled v-model="seeForm.istTm" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="说明" prop="rmk" >
                            <el-input type="textarea" disabled v-model="seeForm.rmk" style="width: 100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                                <el-button @click="seeColse">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {editionlist,doStart,doEnd} from '../../../api/edition/editionlist';
    export default {
        name: 'project',
        data() {
            return {
                query: {//检索条件
                    projectNm: '',
                    fileName:'',
                    userAcct:localStorage.getItem('ms_userAcct'),
                    pageIndex: 1,
                    pageSize: 10
                },
                tableData: [],
                multipleSelection: [],
                pageTotal: 0,
                seeVisible:false,
                seeForm:{}
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取 easy-mock 的模拟数据
            getData() {
                editionlist(this.query).then(res => {
                    this.tableData = res.data;
                    this.pageTotal = res.total;
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.projectNm = "";
                this.query.fileName = "";
                this.getData();
            },
            //启用该版本
            handleStart(index, row){
                doStart({"systemId":row.systemId}).then(res => {
                    if (res.success==true && res.data == 1) {
                        this.$message.success('启用成功');
                        this.getData();
                    } else {
                        this.$message.error('启用失败');
                        this.getData();
                    }
                });
            },
            //停用该版本
            handleEnd(index, row){
                doEnd({"systemId":row.systemId}).then(res => {
                    if (res.success==true && res.data == 1) {
                        this.$message.success('停用成功');
                        this.getData();
                    } else {
                        this.$message.error('停用失败');
                        this.getData();
                    }
                });
            },
            //查看
            handleSee(index, row){
                console.log("row:",row);
                this.seeVisible=true;
                this.seeForm=row
            },
            seeColse(){
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.seeVisible = false;
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });

            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
        }
    };
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .schart {
        width: 550px;
        height: 300px;
    }
    .content-title {
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
</style>
